<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>医院OA</title>
    <!-- Favicon -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../static/public_file/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../../static/public_file/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../../static/public_file/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../../static/public_file/css/responsive.css">
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }

        .body-heught {
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Sign in Start -->
    <section class="sign-in-page" style="height: 90%;">
        <div class="container sign-in-page-bg mt-5 p-0" style="height: 100%;">
            <div class="row no-gutters" style="height: 100%;">
                <div class="col-md-6 text-center" style="margin-top: -5%;">
                    <div class="sign-in-detail text-white">
                        <a class="sign-in-logo mb-5" href="#">
                            <span style="font-size: 3em;color: white;">XXX OA系统</span>
                        </a>

                        <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
                            <div class="item">
                                <img src="../../static/public_file/images/login/1.png" class="img-fluid mb-4" alt="logo">
                                <h4 class="mb-1 text-white">通告标题</h4>
                                <p>通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介</p>
                            </div>
                            <div class="item">
                                <img src="../../static/public_file/images/login/2.png" class="img-fluid mb-4" alt="logo">
                                <h4 class="mb-1 text-white">通告标题</h4>
                                <p>通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介</p>
                            </div>
                            <div class="item">
                                <img src="../../static/public_file/images/login/3.png" class="img-fluid mb-4" alt="logo">
                                <h4 class="mb-1 text-white">通告标题</h4>
                                <p>通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介通告简介</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 position-relative" style="height: 90%;margin-top: 5%;">
                    <div class="sign-in-from">
                        <h1 class="mb-0" style="margin-top: 5%;">登录</h1>
                        <p>欢迎登录 XXX OA系统</p>
                        <form class="mt-4" method="post" action="/personal-center/signin">
                            {%csrf_token%}
                            <div class="form-group">
                                <label for="exampleInputEmail1">用户名</label>
                                <input type="text" name="username" class="form-control mb-0" id="exampleInputEmail1" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">密码</label>
                                <a href="#" class="float-right">忘记密码?</a>
                                <input type="password" name="pwd" class="form-control mb-0" id="exampleInputPassword1"
                                       placeholder="密码">
                            </div>
                            <div class="d-inline-block w-100">
                                <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
                                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                                    <label class="custom-control-label" for="customCheck1">记住我</label>
                                </div>
                                <button type="submit" class="btn btn-primary float-right">登录</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Sign in END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="../../static/public_file/js/jquery.min.js"></script>
    <script src="../../static/public_file/js/popper.min.js"></script>
    <script src="../../static/public_file/js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="../../static/public_file/js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="../../static/public_file/js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="../../static/public_file/js/waypoints.min.js"></script>
    <script src="../../static/public_file/js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="../../static/public_file/js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="../../static/public_file/js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="../../static/public_file/js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="../../static/public_file/js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="../../static/public_file/js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="../../static/public_file/js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="../../static/public_file/js/smooth-scrollbar.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="../../static/public_file/js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="../../static/public_file/js/custom.js"></script>
</body>
</html>
